<ion-header>

  <ion-navbar color="primary">
    <ion-title>Chapter list</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list [virtualScroll]="chapters">
    <button ion-item *virtualItem="let chapter" (tap)="openChapter(chapter)">
      <h2>Content #{{chapter.number}}</h2>
      <p>{{ chapter.title }}</p>
      <ion-note item-end>{{ chapter.lastUpdatedText }}</ion-note>
    </button>
  </ion-list>
  <div *ngIf="!chapters.length && isFinishedLoading" class="no-content">
    <ion-icon name="ios-sad"></ion-icon>
    <div>NO CONTENT YET</div>
  </div>
</ion-content>